<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/override.css" />
		<style>
			#btnSearch {
				border: 0;
				float: right;
			}
			
			#header .mui-input-row {
				float: right;
				width: 75%;
				text-align: left;
			}
			
			#header .mui-input-row input {
				border-radius: 20px;
			}
			
			.mui-bar-nav.mui-bar .mui-icon {
				float: left;
				margin-top: 1px;
			}
			
			.mui-placeholder span {
				float: left;
				margin-top: 5px;
			}
			
			.mui-bar-nav~.mui-content {
				padding-top: 24px;
			}
			
			#historylist {
				margin-top: 18px;
			}
			
			.recent_span {
				margin-left: 20px;
				color: #8f8f94;
				font-size: 16px;
			}
			
			.clear_span {
				float: left;
				width: 100%;
				text-align: center;
				background-color: #fff;
				color: #8f8f94;
				font-size: 16px;
				height: 46px;
				line-height: 46px;
			}
			
			.hide_fun {
				display: none;
			}
		</style>
	</head>

	<body>

		<!--搜索关键词列表-->
		<div id="historylist" class="">
			<span class="recent_span">历史搜索</span>
			<ul class="mui-table-view" id="keylist">
			</ul>
			<span class="clear_span" id="clear_span">清除历史记录</span>
		</div>

		<!--下拉刷新容器-->
		<div id="pullrefresh" class="hide_fun">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view" id="foodlist">
				</ul>
			</div>
		</div>

		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript">
			var ws = null;
			var keylist = document.getElementById("keylist");
			var hislist = document.getElementById("historylist");
			var pullrefresh = document.getElementById("pullrefresh");
			var foodlist = document.getElementById("foodlist");
			var keyword = "";
			mui.plusReady(function() {
				ws = plus.webview.currentWebview();
				ws.setPullToRefresh({
					support: false,
					height: "100px",
					range: "200px",
					contentdown: {
						caption: "下拉可以刷新"
					},
					contentover: {
						caption: "释放立即刷新"
					},
					contentrefresh: {
						caption: "正在刷新..."
					}
				}, onRefresh);
				//显示搜索历史
				showHistory();

				//美食列表点击
				mui("#foodlist").on("tap", ".mui-table-view-cell", function() {
					//打开美食详情
					mui.openWindow({
						id: 'food_detail.html',
						url: 'food_detail.html',
						show: {
							autoShow: false
						}
					});
				});

				//搜索列表点击
				mui("#keylist").on("tap", ".mui-table-view-cell", function() {
					var search_main = plus.webview.currentWebview().parent();
					mui.fire(search_main, "getSearchWord", {
						word: this.innerText
					});
				});
			})

			function onRefresh() {
				meituaApiData.offset++;
				getMeituanData(meituaApiData, foodlist, false);
				ws.endPullToRefresh();
			}

			//显示历史搜索
			function showHistory() {
				var keyword_list = getSearchWordList();
				var fragment = document.createDocumentFragment();
				for(var i = keyword_list.length - 1; i >= 0; i--) {
					var li = document.createElement("li");
					li.className = "mui-table-view-cell";
					var span = document.createElement("span");
					span.className = "mui-icon mui-icon-compose";
					li.appendChild(span);
					var word = document.createTextNode(keyword_list[i].word);
					li.appendChild(word);
					fragment.appendChild(li);
				}
				keylist.appendChild(fragment);
			}

			//从localStorage中读取历史查找记录
			function getSearchWordList() {
				var keywords = localStorage.getItem("$keywords") || '[]';
				return JSON.parse(keywords);
			}

			//保存搜索关键字
			function saveSearchWordList(keyword) {
				var kw = {};
				var wordlist = getSearchWordList();

				//防止重复存储搜索条件
				for(var i = 0; i < wordlist.length; i++) {
					if(wordlist[i].word == keyword) {
						return;
					}
				}
				//只保存5条
				if(wordlist.length == 5) {
					//删除最早的一条
					wordlist.shift();
				}
				kw.index = wordlist.length + 1;
				kw.word = keyword;
				wordlist.push(kw);
				localStorage.setItem("$keywords", JSON.stringify(wordlist));
			}

			//打开或关闭下滑刷新
			function openorcloseRefresh() {
				ws.setPullToRefresh({
					support: mui("div#historylist.hide_fun").length == 1
				});
			}

			//为页面创建search事件，跨页面调用
			window.addEventListener("search", function(event) {
				//关闭搜索历史，打开结果列表
				hislist.classList.add("hide_fun");
				pullrefresh.classList.remove("hide_fun");
				//清空原有列表，执行查找并列表
				foodlist.innerHTML = "";
				keyword = event.detail.word;
				meituaApiData.keyword = keyword;
				getMeituanData(meituaApiData, foodlist, true);
				//保存关键词，打开页面下拉刷新功能
				saveSearchWordList(event.detail.word);
				openorcloseRefresh();
			});

			//清除搜索列表
			document.getElementById('clear_span').addEventListener('tap', function() {
				localStorage.removeItem("$keywords");
				keylist.innerHTML = "";
			})

			//为页面创建search事件，跨页面调用
			window.addEventListener("goback", function(event) {
				hislist.classList.remove("hide_fun");
				pullrefresh.classList.add("hide_fun");
			});
		</script>
	</body>

</html>